﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2017-2018 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Search Nominatim control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Control to add a grid reference to a map." />
  <meta name="keywords" content="ol, control, search, BAN, french, places, autocomplete" />

  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
  
  <link rel="stylesheet" href="../style.css"/>
  <style>
    .ol-search ul {
      color: #333;
      font-size:0.85em;
      max-width: 21em;
    }
    .ol-search ul i {
      display: block;
      color: #333;
      font-size:0.85em;
    }
    .info {
      display: inline-block;
      width: 100%;
    }
    .info a img {
      height: 100px;
      margin-right: .5em;
      float: left;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Search Nominatim control</h1>
  </a>

  <div class="info">
    <a href="http://www.openstreetmap.org/copyright"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Openstreetmap_logo.svg/200px-Openstreetmap_logo.svg.png" alt="OSM"></a>
    <p>
      <i>ol.control.SearchNominatim</i> is a control to search place using 
      <a href="https://wiki.openstreetmap.org/wiki/Nominatim">OSM Nominatim</a>.
      <br/>
      Autocomplete is deactivated as it violates the <a href="https://operations.osmfoundation.org/policies/nominatim/">provider's terms</a>.
      <br/>
      You can activate it at your own risk using a <i>typing</i> option (but use a large anough value to avoid too many requests)...
    </p>
    <p>
      <i>ol.control.SearchNominatim</i> use the <a href="map.control.search.html">ol.control.Search</a> control.
    </p>
    <p>
      <a href="http://www.openstreetmap.org/copyright">Data © OpenStreetMap contributors, ODbL 1.0.</a>
    </p>
  </div>

  <!-- DIV pour la carte -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <label>
      <input id="polygon" type="checkbox" onclick="search.set('polygon', $(this).prop('checked')); search.search();" /> 
      extract polygons<br/>(may slow down requests)
    </label>
    <br/>
    <i>Use the search control to start a new search.</i>
  </div>
  
  <script type="text/javascript">
  // Layers
  var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }) ];

  // The map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      zoom: 5,
      center: [166326, 5992663]
    }),
    layers: layers
  });

  // Current selection
  var sLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        stroke: new ol.style.Stroke ({
          color: 'rgb(255,165,0)',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,165,0,.3)'
        })
      }),
      stroke: new ol.style.Stroke ({
        color: 'rgb(255,165,0)',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,165,0,.3)'
      })
    })
  });
  map.addLayer(sLayer);

  // Set the search control 
  var search = new ol.control.SearchNominatim({
    //target: $(".options").get(0),
    polygon: $("#polygon").prop("checked"),
    reverse: true,
    position: true	// Search, with priority to geo position
  });
  map.addControl (search);

  // Select feature when click on the reference index
  search.on('select', function(e) {
    // console.log(e);
    sLayer.getSource().clear();
    // Check if we get a geojson to describe the search
    if (e.search.geojson) {
      var format = new ol.format.GeoJSON();
      var f = format.readFeature(e.search.geojson, { dataProjection: "EPSG:4326", featureProjection: map.getView().getProjection() });
      sLayer.getSource().addFeature(f);
      var view = map.getView();
      var resolution = view.getResolutionForExtent(f.getGeometry().getExtent(), map.getSize());
      var zoom = view.getZoomForResolution(resolution);
      var center = ol.extent.getCenter(f.getGeometry().getExtent());
      // redraw before zoom
      setTimeout(function(){
        view.animate({
        center: center,
        zoom: Math.min (zoom, 16)
      });
      }, 100);
    } else {
      map.getView().animate({
        center:e.coordinate,
        zoom: Math.max (map.getView().getZoom(),16)
      });
    }
  });

  </script>
  
</body>
</html>